<template>
  <div>
    <bread class="come-back">
      <h1>
        <span class="el-icon-arrow-left icon"></span>
        返回
        <div class="pull-right">
          <el-button size="small" class="custom-button" @click="dialog_college = true" plain>选择通知的学院</el-button>
        </div>
      </h1>
    </bread>
    <pageContent isCard>
      <div class="form-announcements">
        <h1>发布公告</h1>
        <el-form ref="form" class="inputs" :model="form" label-width="80px">
          <el-form-item label="标题">
            <el-input v-model="form.name" placeholder="请输入公告标题"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input type="textarea" v-model="form.desc" placeholder="请输入公告内容"></el-input>
          </el-form-item>
          <el-form-item><span class="add-enclosure">+添加附件</span></el-form-item>
        </el-form>
        <div class="footer">
          <el-button type="primary">发布</el-button>
          <el-button>取消</el-button>
        </div>
      </div>
    </pageContent>
    <el-dialog
      title="确认发布"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span v-if="true">此公告发布时将通过APP、系统消息通知 全校</span>
      <span v-if="false">您没有选择通过APP、系统消息通知任何二级单位 是否确认发布</span>
      <span v-if="false">此公告发布时将通过APP、系统消息通知 柯基学院、外国语学院、美术学院、名字特别长名字特别长名字特别长名字特别长学院 </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="选择通知的学院"
      :visible.sync="dialog_college"
      width="30%"
      :before-close="dialogCollegeClose">
      <span>请选择您想通知的范围，以学院为单位</span>
      <div style="margin: 15px 0;">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
        </el-checkbox-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog_college = false">取 消</el-button>
        <el-button type="primary" @click="dialog_college = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
const cityOptions = ['上海', '北京', '广州', '深圳'];
export default {
  name: 'hello',
  data () {
    return {
      activeName: 'second',
      form: {
        name: '',
        desc: ''
      },
      dialogVisible: true,
      dialog_college: false,
      checkAll: false,
      checkedCities: ['上海', '北京'],
      cities: cityOptions,
      isIndeterminate: true
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleClose() {

    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    }
  },
  components: {
  }
};
</script>
<style lang="scss">
  @import './index.scss';
</style>
